import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {
  items = [
    {textContent: 'Amsterdam', show: true},
    {textContent: 'Bogota', show: true},
    {textContent: 'Buenos Aires', show: true},
    {textContent: 'Cairo', show: true},
    {textContent: 'Dhaka', show: true},
    {textContent: 'Edinburgh', show: true},
    {textContent: 'Geneva', show: true},
    {textContent: 'Genoa', show: true},
    {textContent: 'Glasglow', show: true},
    {textContent: 'Hanoi', show: true},
    {textContent: 'Hong Kong', show: true},
    {textContent: 'Islamabad', show: true},
    {textContent: 'Istanbul', show: true},
    {textContent: 'Jakarta', show: true},
    {textContent: 'Kiel', show: true},
    {textContent: 'Kyoto', show: true},
    {textContent: 'Le Havre', show: true},
    {textContent: 'Lebanon', show: true},
    {textContent: 'Lhasa', show: true},
    {textContent: 'Lima', show: true},
    {textContent: 'London', show: true},
    {textContent: 'Los Angeles', show: true},
    {textContent: 'Madrid', show: true},
    {textContent: 'Manila', show: true},
    {textContent: 'New York', show: true},
    {textContent: 'Olympia', show: true},
    {textContent: 'Oslo', show: true},
    {textContent: 'Panama City', show: true},
    {textContent: 'Peking', show: true},
    {textContent: 'Philadelphia', show: true},
    {textContent: 'San Francisco', show: true},
    {textContent: 'Seoul', show: true},
    {textContent: 'Taipeh', show: true},
    {textContent: 'Tel Aviv', show: true},
    {textContent: 'Tokio', show: true},
    {textContent: 'Uelzen', show: true},
    {textContent: 'Washington', show: true}
  ]
  constructor(private router: Router) { }

  ngOnInit() {
  }

  gotohome(){
    this.router.navigate(['/tabs/tab3'])
  }

  handleInput(event) {
    const query = event.target.value.toLowerCase();
    requestAnimationFrame(() => {
      this.items.forEach(item => {
        const shouldShow = item.textContent.toLowerCase().indexOf(query) > -1;
        item.show = shouldShow;
      });
    });
  }

}
